<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文档</title>
<!-- 代码样式，可根据自己喜欢的改 -->
<link rel="stylesheet" href="/opendoc/highlight/styles/vs.css">
<script src="/opendoc/highlight/highlight.pack.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>
<link rel="stylesheet" type="text/css"
    href="/opendoc/github2-rightpart.css" media="all">
<link rel="stylesheet" type="text/css"
    href="/opendoc/github1-contents.css">
<link rel="stylesheet" href="/opendoc/zTreeStyle.css" type="text/css">
<style>
.ztree li a.curSelectedNode {
    padding-top: 0px;
    background-color: #FFE6B0;
    color: black;
    height: 16px;
    border: 1px #FFB951 solid;
    opacity: 0.8;
}

.ztree {
    overflow: auto;
    height: 100%;
    min-height: 200px;
    top: 0px;
}

.task-list {
    list-style-type: disc !important;
}

/*api*/
.api-config input {width: 400px;}
.api-data {width: 600px;height: 70px;}
.api-result {width: 600px;height: 300px;}
.api-block table{font-size: 13px;}
.markdown-body h1{font-size: 22px;}
.markdown-body h2{font-size: 18px;}
.markdown-body h3{font-size: 14px;}
</style>
</head>
<body>
    <div>
        <div style="width: 30%;">
            <ul id="tree" class="ztree"
                style="width: 260px; overflow: auto; position: fixed; z-index: 2147483647; border: 0px none; left: 0px; bottom: 0px;">
                <!-- 目录内容在网页另存为之后将插入到此处 -->
            </ul>
        </div>
        <div id="readme" style="width: 70%; margin-left: 25%;">
            <article class="markdown-body">


                <!-- ***********************************************************内容分割线****************************************************************** -->
                <!-- 请把你的html正文部分粘贴到此处，在浏览器中打开之后将会自动生成目录。如果想要将目录保留并嵌入到此文档中，只需在浏览器中“另存为->网页，全部”即可 -->
                <h1>配置项</h1>
                <table class="api-config">
                    <tr>
                        <th>HTTP请求地址</th><td> <input id="url" type="text" value="${url}" /> </td>
                    </tr>
                    <tr>
                        <th>app_key</th><td> <input id="appKey" type="text" value="test" /> </td>
                    </tr>
                    <tr>
                        <th>secret</th><td> <input id="secret" type="text" value="123456" /> </td>
                    </tr>               
                </table>
                
                #foreach($entry in $docEntrys)                         
		        <h1>${entry.key}</h1>
		          #foreach($docItem in ${entry.value})      
		              <h2>${docItem.name} ${docItem.description}${docItem.version}</h2>
		              <div class="api-block">
		                  <input type="hidden" class="api-name" value="${docItem.name}"/>
		                  <input type="hidden" class="api-version" value="${docItem.version}"/>
		                  <span>请求参数</span>
		                  <form class="busi-param">
		                    <table>
		                        <tr>
		                            <th width="22%">名称</th>
		                            <th width="15%">类型</th>
		                            <th width="10%">是否必须</th>
		                            <th width="12%">示例值</th>
		                            <th width="36%">描述</th>
		                         </tr>
		                         #foreach($paramDefinition in ${docItem.paramDefinitions})
		                         <tr>
		                             <td>${paramDefinition.name}</td>
		                             <td>${paramDefinition.dataType}</td>
		                             <td>${paramDefinition.required}</td>
		                             <td><input type="text" name="${paramDefinition.name}" value="${paramDefinition.example}"/></td>
		                             <td>${paramDefinition.description}</td>
		                         </tr>
		                         #end
		                    </table>
		                    </form>
		                    <span>返回结果</span>
		                    <table>
	                            <tr>
	                                <th width="25%">名称</th>
	                                <th width="20%">类型</th>
	                                <th width="15%">示例值</th>
	                                <th width="40%">描述</th>
	                            </tr>
	                             #foreach($resultDefinition in ${docItem.resultDefinitions})
                                 <tr>
                                     <td>${resultDefinition.name}</td>
                                     <td>${resultDefinition.dataType}</td>
                                     #if(${resultDefinition.dataType} == 'ARRAY')
                                     <td>
                                        <table>
			                                <tr>
			                                    <th width="25%">名称</th>
			                                    <th width="20%">类型</th>
			                                    <th width="15%">示例值</th>
			                                    <th width="40%">描述</th>
			                                </tr>
			                                 #foreach($elDefinition in ${resultDefinition.elements})
			                                 <tr>
			                                     <td>${elDefinition.name}</td>
			                                     <td>${elDefinition.dataType}</td>
			                                     <td>${elDefinition.example}</td>
			                                     <td>${elDefinition.description}</td>
			                                 </tr>
			                                 #end
			                           </table>
			                          </td>
                                     #else
                                         <td>${resultDefinition.example}</td>
                                     #end
                                     <td>${resultDefinition.description}</td>
                                 </tr>
                                 #end
	                       </table>
	                     <hr/>
                         <p><button type="button" class="post-btn">请求</button></p>
                         <div class="post-result" style="display: none;">
	                      <table>
	                          <tr>
	                              <th>请求数据</th><td><textarea readonly="readonly" class="api-data"></textarea></td>
	                          </tr>
	                          <tr>
	                              <th>返回结果</th><td><textarea readonly="readonly" class="api-result"></textarea></td>
	                          </tr>
	                      </table>
                        </div>
		              </div>
		          #end
		        #end
                <!-- ***********************************************************内容分割线****************************************************************** -->

            </article>
        </div>
    </div>
    <script src="/opendoc/jquery-1.10.2.min.js"></script>
    <script src="/opendoc/jquery.ztree.all-3.5.min.js"></script>
    <script src="/opendoc/jquery.ztree_toc.min.js"></script>
    <script src="/opendoc/md5.js"></script>
    <script src="/opendoc/format.js"></script>
    <script type="text/javascript">
     var title = document.title;
     var jq = jQuery;
     jQuery(document).ready(function(){
         jQuery('#tree').ztree_toc({
             _header_nodes: [{ id:1, pId:0, name:title,open:false}],  // 第一个节点
             ztreeSetting: {
                 view: {
                     dblClickExpand: false,
                     showLine: true,
                     showIcon: false,
                     selectedMulti: false
                 },
                 data: {
                     simpleData: {
                         enable: true,
                         idKey : "id",
                         pIdKey: "pId"
                         // rootPId: "0"
                     }
                 },
                 callback: {
                     beforeClick: function(treeId, treeNode) {
                         jQuery('a').removeClass('curSelectedNode');
                         if(treeNode.id == 1){
                             jQuery('body').scrollTop(0);
                         }
                         if(jQuery.fn.ztree_toc.defaults.is_highlight_selected_line == true) {
                             jQuery('#' + treeNode.id).css('color' ,'red').fadeOut("slow" ,function() {
                                 jQuery(this).show().css('color','black');
                             });
                         }
                     }
                 }                   
             },
             is_auto_number:false, // 菜单是否显示编号，如果markdown标题没有数字标号可以设为true
             documment_selector:'.markdown-body',
             is_expand_all: true // 菜单全部展开
         });
         // 代码高亮
         jQuery('.highlight').each(function(i, block) {
             hljs.highlightBlock(block);
         });
         
         jQuery('.api-block').find('.post-btn').click(function(){
        	 var _parent = jQuery(this).parents('.api-block');
             var name = _parent.find('.api-name').val();
             var version =_parent.find('.api-version').val();
             
             var jsonData = {};
             var formArray = _parent.find('form').serializeArray();
             
             jQuery.each(formArray, function(i, field){
            	 jsonData[field.name] = field.value;
             });
             
             var _param = _parent.find('.api-data');
             var _result = _parent.find('.api-result');
             var _postResult = _parent.find('.post-result');
             
             ApiUtil.post(name,jsonData,version,function(resp,postDataStr){
                 _param.val(postDataStr);
                 _result.val(formatJson(JSON.stringify(resp)));
                 _postResult.show();
                 
             });
             return false;
         });
     });
     
var ApiUtil = (function(){
    
    var API_NAME = "name";
    var VERSION_NAME = "version";
    var APP_KEY_NAME = "app_key";
    var DATA_NAME = "data";
    var TIMESTAMP_NAME = "timestamp";    
    var SIGN_NAME = "sign";    
    var FORMAT_NAME = "format";
    
    function add0(m){return m<10?'0'+m:m }

    function formatDate(time)
    {
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
    }
    
    /**
    Set<String> keySet = paramsMap.keySet();
        List<String> paramNames = new ArrayList<String>(keySet);

        Collections.sort(paramNames);

        StringBuilder paramNameValue = new StringBuilder();

        for (String paramName : paramNames) {
            paramNameValue.append(paramName).append(paramsMap.get(paramName));
        }

        String source = secret + paramNameValue.toString() + secret;

        return md5(source);
    */
    function buildSign(postData,secret) {
        var paramNames = [];
        for(var key in postData) {
            paramNames.push(key);
        }
        
        paramNames.sort();
        
        var paramNameValue = [];
        
        for(var i=0,len=paramNames.length;i<len;i++) {
            var paramName = paramNames[i];
            paramNameValue.push(paramName);
            paramNameValue.push(postData[paramName]);
        }
        var secret = jQuery('#secret').val();
        var source = secret + paramNameValue.join('') + secret;
        
        return hex_md5(source).toUpperCase();
    }
    
    return {
        post:function(name,data,version,callback) {
            var postData = {};
            postData[API_NAME] = name;
            postData[VERSION_NAME] = version;
            postData[APP_KEY_NAME] = jQuery('#appKey').val();
            postData[DATA_NAME] = encodeURIComponent(JSON.stringify(data));
            postData[TIMESTAMP_NAME] = formatDate(new Date());
            postData[FORMAT_NAME] = 'json';
            postData[SIGN_NAME] = buildSign(postData,secret);
            
            var postDataStr = JSON.stringify(postData);
            jQuery.ajax({
                url:jQuery('#url').val(),
                type:'post',
                dataType:'json',
                contentType: "application/json;charset=utf-8",
                data:postDataStr,
                success:function(data){
                    callback(data,postDataStr);
                }
            });
         }
         
    };
})();
    </script>
</body>
</html>